<!DOCTYPE html>
<html lang="en">
<head>
    <!--    引入令牌验证失效的跳转js-->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/fbiJudge.js"></script>
    <script src="../js/main.js"></script>
    <script src="../coco-message.js"></script>
    <script>
        fbi();
        getUInfoToLocal();
    </script>
    <meta charset="UTF-8">
    <title>交友盲盒</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/index2.css">
    <link rel="stylesheet" href="../css/cropper.min.css">
    <link rel="stylesheet" href="../tip/just-tip.css">
</head>
<body>
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="imgs/Halloween6.jpg" class="d-block" alt="..." style="height: 47.88vw; width: 100vw;">
                    </div>
                    <div class="carousel-item">
                        <img src="imgs/Halloween7.jpg" class="d-block" alt="..." style="height: 47.88vw; width: 100vw;">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"
                        data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"
                        data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="container mt-4">
    <div class="row text-center">
        <div class="col-12 headText">
            抽取盲盒
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-6 text-center" id="getMan">
            <img src="../imgs/getOne2.png" alt="..." style="width: 100%; height: auto;" onclick="getTip(1)">
        </div>
        <div class="col-6 text-center" id="getWoman">
            <img src="../imgs/getOne1.png" alt="..." style="width: 100%; height: auto;" onclick="getTip(0)">
        </div>
    </div>

    <div class="row text-center mt-5">
        <div class="col-12 headText">
            纸条管理
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12 text-center">
            <button type="button" class="btn" id="getOne" data-toggle="modal" data-target="#putTip">投递纸条</button>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-6 text-center">
            <a href="/to_mypaper"><button type="button" class="btn" id="myGets">我抽到的纸条</button></a>
        </div>
        <div class="col-6 text-center">
            <a href="/to_myputpaper" style="color: white;"><button type="button" class="btn" id="myTips">我放入的纸条</button></a>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12 text-center">
            <a href="/to_getMe" style="color: white;"><button type="button" class="btn" id="getMe">谁获得了我的纸条</button></a>
        </div>
    </div>
</div>

<div class="modal fade" id="div1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">玩家须知</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>这是一个盲盒游戏，你不知道会抽到谁的纸条，也不知道你的纸条将会被谁抽到。</p>

                <p>如果您放入纸条，建议您认真填写，并留下真实有效的联系方式，以便喜欢你的人能够联系到你。</p>

                <p>希望您带着一颗真诚的心来交友，乱填的纸条有可能会作废哦。</p>

                <p style="color: indigo;"><font style="font-weight: bold">同时请注意每人每天只能抽取六次盲盒和投递纸条五次。</font></p>

                <p style="color: indigo;"><font style="font-weight: bold">并且只能查看自己最新抽取和投递的十张纸条。</font></p>

                <p style="color: indigo;"><font style="font-weight: bold">为鼓励大家积极参数投递纸条的活动中来，我们会在玩家投递一次纸条后，奖励其两次抽取纸条的机会。</font></p>

                <p>所有纸条均来自网友，我们无法保证所有纸条内容的真实性，在添加好友时，请一定要仔细甄别，切勿轻易转账以防被骗。</p>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="div2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">截图扫码添加客服QQ群</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center mt-2">
                    <img src="../imgs/QQGroup.jpg" alt="..." style="height: 200px; width: 200px;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn2"><a style="color: white;" target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=j69a_SJ82wUk1VDM19JmBK04knTrPYA4&jump_from=webapi">一键加群</a></button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="div4">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">截图扫码添加客服微信群</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center mt-2">
                    <img src="../imgs/WXGroup.jpg" alt="..." style="height: 200px; width: 200px;">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="div3">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">版本信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>2.0测试版本优化如下: </p>

                <p>新推出了自拍上传功能，优化完善了纸条的显示功能</p>

                <p>加强了对纸条质量的过滤</p>

                <p>招募信息: </p>

                <p>团队缺少ui设计师和前端工程师</p>

                <p>诚心欢迎有志之士加入我们的工作室</p>

                <p>有意者请加QQ群：662468656</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn2"><a style="color: white;" target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=T9gjvoDnClz3uRaf2wu_ZbwFx5kgKBlP&jump_from=webapi">一键加群</a></button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="saveFlag()">确认</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="putTip">
    <div class="modal-dialog">
        <div class="modal-content p-4">
            <div class="col-12 text-center headText2 mt-3">
                请放入纸条
            </div>
            <div class="col-12">
                <div class="form-group" style="color: black; font-weight: normal">
                    <label for="value">联系方式<font style="color:red;">（必填）</font></label>
                    <select class="form-control col-4" id="valueType" name="valueType">
                        <option value="QQ：">QQ</option>
                        <option value="微信号：">微信号</option>
                        <option value="手机号：">手机号</option>
                    </select>
                    <input type="text" class="form-control mt-2" id="value" name="value"
                           placeholder="QQ/微信号/手机号" maxlength="100" required>
                </div>

                <div class="form-group" style="color: black; font-weight: normal;margin-top: 20px">
                    <label for="info">自我介绍<font style="color:red;">（必填）</font></label>
                    <textarea type="text" class="form-control" id="info" name="info"
                              maxlength="90" required></textarea>
                </div>

                <div class="form-group" style="color: black; font-weight: normal;margin-top: 20px">
                    <label for="image">照片<font style="color:gray;">（选填）</font></label>
                    <br>
<!--                    data-toggle="tooltip" title="照片上传"-->
                    <label class="label">
                        <img class="rounded" style="width: 150px; height: 150px" id="avatar" src="/imgs/no_selfImg.jpg"
                             alt="avatar">
                        <input type="file" class="sr-only" id="input" name="image" accept="image/*">
                    </label>
                </div>

                <button class="btn2" style="font-size: 15px;" onclick="putTip()">提交</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">请保证信息填写完整后再上传</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <img id="image" src="/imgs/no_selfImg.jpg">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn2" data-dismiss="modal">取消</button>
                <button type="button" class="btn2" id="crop">上传照片并投递纸条</button>
            </div>
        </div>
    </div>
</div>

<button type="button" data-toggle="modal" data-target="#div3" id="btn3" style="display: none;"></button>
<footer>
    <div class="row pb-2 my-4" style="font-family: sans-serif;">
        <div class="col-12 footText text-center">
            <button type="button" data-toggle="modal" data-target="#div1"
                    style="background-color: rgba(255, 255, 255, 0); border: 0; color: white; font-size: 15px;">玩家须知
            </button>
            <span> |</span>
            <button type="button" data-toggle="modal" data-target="#div2"
                    style="background-color: rgba(255, 255, 255, 0); border: 0; color: white; font-size: 15px;">用户QQ反馈群
            </button>
            <span> |</span>
            <button type="button" data-toggle="modal" data-target="#div4"
                    style="background-color: rgba(255, 255, 255, 0); border: 0; color: white; font-size: 15px;">用户微信反馈群
            </button>
        </div>
    </div>
</footer>

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script src="../js/virtualImgs.js"></script>
<script src="../js/bootstrap.bundle.js"></script>
<script src="../js/main.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/putTip.js"></script>
<script src="../tip/justTools.js"></script>
<script>
    if (window.localStorage.flag == undefined) {
        $('#btn3').trigger("click");
    }

    function saveFlag() {
        window.localStorage['flag'] = "ok";
    }

    $("#getMan").mouseover(function (event) {
        var _this = $(this);
        _this.justToolsTip({
            events: event,
            animation: "moveInBottom",
            width: "auto",
            contents: "<font color='aqua'>从盲盒中随机抽取一个男生纸条</font>",
            gravity: 'bottom'
        });
    })

    $("#getWoman").mouseover(function (event) {
        var _this = $(this);
        _this.justToolsTip({
            events: event,
            animation: "moveInBottom",
            width: "auto",
            contents: "<font color='#ff69b4'>从盲盒中随机抽取一个女生纸条</font>",
            gravity: 'bottom'
        });
    })

</script>
</body>
</html>